<template>
  <el-dialog
    v-loading="dialogLoading"
    v-model="dialogOpen"
    :width="width"
    :modal="dialogModal"
    :title="dialogTitle"
  >
    <slot />
    <template #header>
      <slot name="dialogheader" />
    </template>
    <template #footer>
      <slot name="dialogfooter" />
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { Ref, ref } from "vue";
const dialogLoading: Ref<boolean> = ref<boolean>(false);
const dialogOpen: Ref<boolean> = ref<boolean>(false);
const emits = defineEmits<{
  (e: "openDialog", isOpen?: boolean): void;
}>();
withDefaults(
  defineProps<{
    dialogTitle?: string;
    dialogModal?: boolean;
    width?: number;
  }>(),
  {
    dialogTitle: "aigc",
    dialogModal: true,
    width:100
  }
);

const openDialog = (isOpen: boolean) => {
  dialogOpen.value = isOpen;
  dialogLoading.value = isOpen;
  emits("openDialog", dialogOpen.value);
  if (isOpen) {
    dialogLoading.value = false;
  }
};

defineExpose({ openDialog });
</script>
<style lang="ts" setup></style>
